<template>
  <div>
    <el-row type="flex" :justify="justify">
      <el-button type="text" @click="dialogVisible = true">
        <el-link :underline="true" type="primary" :href="href" target="embed">{{ label }}</el-link>
      </el-button>
    </el-row>
    <el-dialog
      width="80%"
      top="5%"
      :visible.sync="dialogVisible"
      :modal="true"
      :modal-append-to-body="false"
      :close-on-click-modal="true"
    >
      <iframe name="embed" width="100%" height="400px" frameborder="0" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PktEmbedUrl',
  props: {
    justify: {
      type: String,
      default: 'end'
    },
    label: {
      type: String,
      required: true
    },
    href: {
      type: String,
      required: true,
      default: 'javascript:;'
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>
